<template>
  <h2>账号管理 </h2>

  <div align="left">
    <vxe-button status="danger" content="删除选中" @click="删除选中" icon="vxe-icon--error"></vxe-button>
    <vxe-button status="primary" content="保存打钩项" @click="保存打钩项" icon="vxe-icon--check"></vxe-button>
    <vxe-button status="primary" content="导入账号" @click="上传账号_显示 = true"></vxe-button>
    <vxe-button status="success" content="导出到文档" @click='导出到文档'></vxe-button>
    <vxe-button status="danger" content="清空全部" @click="删除所有"></vxe-button>
  </div>

  <div>
    <vxe-table border resizable show-overflow ref="xTable" :data="tableData"
               :edit-config="{trigger: 'click', mode: 'cell'}" @edit-closed="editClosedEvent" size="mini">
      <vxe-column type="checkbox" width="60"></vxe-column>
      <vxe-table-column type="seq" width="60"></vxe-table-column>
      <vxe-table-column field="名字" title="姓名"
                        :edit-render="{name: 'input', attrs: {type: 'text', placeholder: '姓名'}}"></vxe-table-column>
      <vxe-table-column field="身份证号码" title="号码"
                        :edit-render="{name: 'input', attrs: {type: 'text', placeholder: '号码'}}"></vxe-table-column>
      <vxe-table-column field="次数" title="绑定次数"
                        :edit-render="{name: 'input', attrs: {type: 'text', placeholder: '绑定次数'}}"></vxe-table-column>
      <vxe-table-column field="状态" title="状态"
                        :edit-render="{name: 'input',attrs: {type: 'text', placeholder: '状态'}}"></vxe-table-column>
      <vxe-table-column field="备注" title="备注"
                        :edit-render="{name: 'input',attrs: {type: 'text', placeholder: '备注'}}"></vxe-table-column>

    </vxe-table>
  </div>
  <vxe-pager background v-model:current-page="page.currentPage" v-model:page-size="page.pageSize"
             v-model:total="page.totalResult"
             :layouts="['PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']"
             @page-change='刷新数据'>
    <template #right>
      <img src="https://xuliangzhan_admin.gitee.io/vxe-table/static/other/img1.gif" height="34">
      <img src="https://xuliangzhan_admin.gitee.io/vxe-table/static/other/img1.gif" height="34">
      <img src="https://xuliangzhan_admin.gitee.io/vxe-table/static/other/img1.gif" height="34">
    </template>
  </vxe-pager>

  <vxe-modal v-model="上传账号_显示" width="600" show-zoom>
    <template #default>
      (支持一次性上传多个账号)导入格式：姓名----号码 或 姓名----号码----备注 <br/>
      举个栗子:<br/>
      王麻子----123456----备注<br/>
      王麻子----123456<br/>
      <vxe-button @click="上传账号_上传" status="primary" content="上传"></vxe-button>
      <vxe-textarea v-model="上传账号_账号" placeholder="输入需要上传的账号和密码" :autosize="{ minRows: 25}"></vxe-textarea>
      <br/>
    </template>
  </vxe-modal>

</template>

<script>
import fqxs from "../components/账号管理/分区管理";

export default {
  components: {fqxs},
  data() {
    return {
      上传账号_显示: false,
      上传账号_账号: "",

      page: {
        currentPage: 1,
        pageSize: 50,
        totalResult: 0,
      },

      tableData: [],
    };
  },
  methods: {
    刷新数据: function () {
      this.tableData = [];
      var T = this;
      this.$请求
      (
          "/idCard/list",
          {
            page: T.page.currentPage,
            pageSize: T.page.pageSize,
          },
          function (response) {
            console.log(response.data.data);
            T.tableData = response.data.data;
            T.page.totalResult = response.data.total;
            T.$XModal.message({content: "刷新成功", status: "success"});
          },
          function (err) {
            console.log(err);
          }
      )
    },

    上传账号_上传: function () {
      var T=this;
      var 数据 = this.上传账号_账号;
      var reg = /([^\s\r\n\-]{2,})\-{4}([0-9Xx]{18})(\-{4}([^\s\r\n]{1,})){0,1}/g;
      var 待上传 = [];
      var match;
      while ((match = reg.exec(this.上传账号_账号)) != null) {
        待上传.push({
          身份证号码: match[2],
          名字: match[1],
          备注: match[4] || "",
        });
      }
      if (待上传 == null || 待上传.length < 1) {
        alert("输入格式有误,请检查");
        return;
      }
      待上传 = JSON.stringify(待上传);
      this.$请求(
          '/addOrUpate/idCard',
          {身份证号数组: 待上传},
          function (obj) {
            T.刷新数据();
          },
          function (err) {
            alert('上传失败');
            return;
          }
      )
    },
    getSelectionEvent: function () {
      const $table = this.$refs.xTable.getCheckboxRecords();
      return $table;
    },
    删除选中: function () {
      const table = this.getSelectionEvent();
      const T = this;
      var idsArr = table.map(x => x.id);
      var idsArrString = JSON.stringify(idsArr);
      this.$请求(
          '/dell/all/idCard',
          {id数组: idsArrString},
          function (response) {
            T.刷新数据();
          },
          function (err) {
            T.刷新数据();
          },
      )
    },
    保存打钩项: function () {
      const table = this.getSelectionEvent();
      const T = this;
      console.log(JSON.stringify(table))


      for (var i = 0, new_data = []; i < table.length; i++) {
        new_data.push({
          id: table[i].id,
          姓名: table[i].姓名,
          姓名: table[i].姓名,
          号码: table[i].号码,
          绑定次数: table[i].绑定次数,
          状态: table[i].状态,
          备注: table[i].备注
        });
      }

      this.$axios
          .post(this.$route.query.admin + "/idcard修改", {
            data: JSON.stringify(new_data),
          })
          .then(function (response) {
            console.log(response.data);
            T.刷新数据();
            T.$XModal.alert({content: "success 保存成功", status: "success"});
          })
          .catch(function (error) {
            alert("出错啦");
          });


    },
    导出到文档: function () {
      const $table = this.$refs.xTable;
      $table.exportData({
        data: $table.getCheckboxRecords(),
      });
    },

    //修改单行的所有数据
    editClosedEvent({row, column}) {
      this.$请求(
          '/update/one/idCardInfo',
          row,
          function (response) {
            console.log(response);
          },
          function (err) {
            console.log(err);
          },
      )
    },

    删除所有: function () {
      var state =confirm('确定全部清空')
      if(state){
        this.$请求(
            '/delete/all/idCardInfo',
            {},
            function (obj) {
              T.刷新数据();
            },
            function (obj) {
              alert('全部删除失败');
            }
        )
      }
    }
  },
  created() {
    this.刷新数据();
  },
};
</script>

<style>
</style>
